<template>
  <div>
    <p>ref 定义响应式数据</p>
    <input type="text" placeholder="ref" v-model="valRef" />
    <button @click="refFn">改变</button>
  </div>
  <div>
    <p>reactive 定义响应式对象</p>
    <input type="text" placeholder="reactive" v-model="valReactive.name" />
    <button @click="reactiveFn">改变</button>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
//两种定义响应式数据的方式
//ref 定义响应式数据
//reactive 定义响应式对象

//响应式就是数据变化时,视图会自动更新

//ref 和 reactive 的区别
//reactive 定义普通数据类型时,不具有响应式  定义复杂数据类型时具有响应式
//ref 可以定义普通数据类型和复杂数据类型都具有响应式  需要.value来获取值或设置值

const valRef = ref("")// ref 定义响应式数据
const valReactive = reactive({
  name: ''
})// reactive 定义响应式对象

//ref 点击改变数据
const refFn = () => {
  valRef.value = Date.now()
}

//reactive 点击改变数据
const reactiveFn = () => {
  valReactive.name = Date.now()
}
//watch 监听数据变化 
watch(valRef, (val) => {
  console.log("ref", valRef, val)
})
watch(valReactive, (val) => {
  console.log("reactive", valReactive, val)
})

</script>
